<template>
	<view class="order" :style="{'--height':`${topHeight}rpx`}">
		<common-navbar :title="orderView.navbar"></common-navbar>
		<u-tabs :list="tabList" name='name' :is-scroll="false" inactive-color="#999999" active-color="#46a3f4"
			:current="current" @change="tabsChange" class="tabs" font-size="28" height="88" bar-height="8"
			bar-width="56"></u-tabs>

		<swiper :current="swiperCurrent" @animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-for="(swiperItem, swiperIndex) in tabList" :key="swiperIndex">
				<scroll-view scroll-y class="scroll-view" @scrolltolower="onreachBottom">
					<view class="order-item" v-for="(item,index) in orderList" :key="index"
						@click="$u.route(`/pages/order_detail/orderDetail?taskCode=${item.task_code}`)">
						<view class="order-item-icon">
							<u-image width="100%" height="100%" border-radius="12" :src="orderView.icon" />
						</view>
						<view class="order-info">
							<view class="order-info-top">
								<view class="order-type">
									{{orderView.title}}
								</view>
								<view class="order-number">
									编号:{{item.task_code}}
								</view>
							</view>
							<view class="order-info-price">
								￥{{item.pay_amount||item.amount}}
							</view>
						</view>
						<view class="order-status" :class="payStatus(item).orderStyle">
							{{payStatus(item).orderTitle}}
						</view>
						<view class="order-btn" @click.stop="()=>{payStatus(item).orderBtnClick(item)}"
							:class="payStatus(item).orderStyle">{{payStatus(item).orderBtnText}}
						</view>
					</view>
					<u-loadmore :status="status" />
				</scroll-view>
			</swiper-item>
		</swiper>
		<dropDownMenu :isDropDowmMenuShow="isDropDowmMenuShow" />
		<payBar ref="payBar" :isCheckFollowStatus="false" />
	</view>
</template>

<script>
	import {
		getMixinByOrderType
	} from "./orderListMixin.js";
	import dropDownMenu from "./components/dropdown-menu/dropDownMenu.vue";
	export default {
		components: {
			dropDownMenu
		},
		mixins: [getMixinByOrderType()],
		data() {
			return {
				status: 'loadmore',
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				isDropDowmMenuShow: false,
				orderType: '',
				orderList: [],
				pageSize: 6,
				pageNum: 1,
			}
		},
		onLoad(options) {
			this.orderType = options.orderType;
			console.log(this.orderType)
			this.getOrderList(this.tabList[this.current].status);
		},
		computed: {
			topHeight() {
				return (750 * this.$systemInfo.statusBarHeight / this.$systemInfo.screenWidth) + 176;
			},
		},
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				console.log(index)
				// console.log('current', this.current);
				// if (index == 3 && this.current == 3) {
				// 	return this.isDropDowmMenuShow = !this.isDropDowmMenuShow;
				// } else 
				if (index == this.current) {
					return
				}
				this.current = index;
				this.pageNum = 1;
				this.swiperCurrent = index;
				this.orderList = [];
				this.getOrderList(this.tabList[this.current].status);
				// this.isDropDowmMenuShow = false;
			},
			animationfinish(e) {
				let current = e.detail.current;
				if(this.swiperCurrent == current){
					return
				}
				this.swiperCurrent = current;
				this.current = current;
				this.pageNum = 1;
				this.orderList = [];
				this.getOrderList(this.tabList[this.current].status);
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				console.log('滚动到底部')
				this.getOrderList(this.tabList[this.current].status);
			},
			onClick(event) {
				// event();
			},
			async payAgain(order) {
				const pay_type = await this.getPayType();
				console.log('立即支付')
				const {
					task_code,
					price,
					excess_time,
				} = (await this.$u.post(this.detailRestUrl, {
					task_code: order.task_code,
				})).data

				if (pay_type == 1) {
					const options = {
						taskCode: task_code,
						price,
						countDown: excess_time,
						again_pay: pay_type,
					}
					await this.$refs.payBar.pay(options);
				} else if (pay_type == 2) {
					const res = await this.$u.post(this.$restUrl.getWXPayOptions, {
						task_code,
						amount: price,
						again_pay: pay_type,
					})
					await this.$wx.WXPay({
						...res.data,
						task_code: task_code
					});
				} else if (pay_type == 3) {
					const options = {
						task_code,
						amount: price,
						again_pay: pay_type
					}
					await this.$u.post(this.$restUrl.balancePayment, options)
				}


				console.log('支付成功');
				let complateTabIndex;
				this.tabList.forEach((item, index) => {
					if (item.name == '待处理') {
						complateTabIndex = index;
					}
				})
				console.log(complateTabIndex)
				this.tabsChange(complateTabIndex);
			},
			toDetail(order) {
				this.$u.route(`/pages/order_detail/orderDetail?taskCode=${order.task_code}`);
			},
			renewal() {
				this.$u.route('/pages/vip/vip')
			},
			async toConsult(order) {
				const {
					data
				} = await this.$u.post(this.detailRestUrl, {
					task_code: order.task_code,
				})
				const session = {
					sessionId: data.groupid,
					sessionName: data.group_name,
					chatType: 'groupChat',
				}
				this.$u.route(`/pages_chat/chat_detail/chatDetail?sessionInfo=${encodeURIComponent(JSON
						.stringify(session))}`);
			},
			async toEvaluation(order) {
				const {
					data
				} = await this.$u.post(this.detailRestUrl, {
					task_code: order.task_code,
				})
				this.$u.route(`/pages_lawyer/lawyer_evaluation/lawyerEvaluation?taskCode=${data.task_code}&evaluateId=${data.evaluate_id}`)
			},
			async topupAgain(order) {
				const {
					data
				} = await this.$u.post(this.$restUrl.getWXPayOptions, {
					task_code: order.task_code,
					amount: order.amount,
				})
				const res = await this.$wx.WXPay(data);
				this.$showToast('充值成功');
				// this.getOrderDetail();
				this.tabsChange(0);
			},
			toTopup() {
				this.$u.route({
					url: '/pages/top_up/topUp',
					type: 'redirectTo'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "./order.scss";
</style>
